/**
 * 文件名称:LoginView.vue(电量智能监控平台登录组件)
 * 创建时间:2025-07-30
 * 创建作者:lulinjie
 * 功能描述:处理用户登录逻辑,包含表单验证、API请求、Token存储
 * 
 * 变更历史:
 * 2025-07-22  lisi  修复:登录按钮重复点击问题(关联Issue #123)
 * 2025-07-28  zhangsan  新增:验证码功能，优化错误提示样式
 */
<script setup lang="ts">
import { ref } from 'vue'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { login } from '../api/api'
import { md5 } from 'js-md5'
import { useTokenM } from '@/utils/tokenM'

const token = useTokenM()
const router = useRouter()
const loginForm = ref({
  username: "admin",
  password: "123456"
})

const toLogin = async () => {
  try {
    loginForm.value.password = md5(loginForm.value.password)
    const res = await login(loginForm.value)
    console.log("LoginView.vue/toLogin", res.data)
    if( res.data.code === 200 ) {
      token.setToken(res.data.data.token)
      router.push("/admin")
    }
  }catch(e){
    console.log(e);
  }
}
const toRegister = () => {}
</script>

<template>
  <main>
    <div class="pic"><img src="/login.gif" alt="登录图片"></img></div>
    <div class="login">
      <div class="login-form">
        <div class="title"><h1>电量智能监控平台</h1></div>
        <div class="titleL"><h3>WELCOME LOGIN</h3></div>
        <div class="form">
          <a-form :modle="loginForm">
            <a-form-item>
              <a-input v-model:value="loginForm.username" placeholder="User Account" style="width: 200px;">
                <template #prefix>
                  <user-outlined />
                </template>
              </a-input>
            </a-form-item>

            <a-form-item>
              <a-input v-model:value="loginForm.password" type="password" placeholder="User Password" style="width: 200px;">
                <template #prefix>
                  <LockOutlined />
                </template>
              </a-input>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" style="width: 200px;" @click="toLogin">登录</a-button>
            </a-form-item>

            <a-form-item>
              <a-button style="width: 200px;" @click="toRegister">注册</a-button>
            </a-form-item>
          </a-form>
          <a-divider><a>忘记密码</a></a-divider>
        </div>
      </div>
    </div>
  </main>
</template>

<style lang="scss" scoped>
main {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    .pic,
    .login,
    .title,
    .form,
    .titleL {
      display: grid;
      place-items: center;
    }
    .login-form {
      width: 360px;
      height: 400px;
      .title {
        width: 100%;
        height: 80px;
        h1 {
          color: $primary-color;
        }
      }
      .titleL {
        h3 {
          color: #7f7f7f;
        }
      }
      .form {
        width: 100%;
        height: 320px;
      }
    }
}
</style>